<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>图标菜单按钮图片</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
	<style>
		.a{
			height: 50px;
			border: 1px solid #ccc;
			background-color: #eee;
		}
	</style>
</head>
<body style="margin: 100px;">
	<!-- 
	1.图标 (建议使用i标签或span标签)
		1)	.glyphicon 								// 后续类的添加必须在这个基础之上
		2)	.glyphicon-* 							// 对应图标

	2.下拉菜单	(上拉菜单.dropup)【li内一律不能缺少a】
		1) 	.dropdown 								//下拉菜单,对父级容器添加
		2)	data-toggle="dropdown" 					//点击切换显示隐藏(JS的),对被点击元素添加
		3)	.dropdown-toggle 			//对被点击的对象添加。使得右上角还是圆角【但是有些时候似乎去掉也没事，推荐还是加上】
		4)	.dropdown-menu 							//对ul添加,下拉选项

		*	.dropdown-menu-left 					//对ul添加.需要在有.dropdown-menu下，这是初始默认值
		*	.dropdown-menu-right 					//对ul添加.需要在有.dropdown-menu下
		*	.open 									//对最外层容器添加。默认展示所有选项
		*	.dropdown-header 						//对li添加。设置菜单标题,该元素是不可点击的
		*	.divider 								//对空li添加。菜单分割线
		*	.disabled 								//对li(或button)添加。禁用状态

	3.按钮组组件
		1)	.btn-group 								//对新建父级容器div添加]
		*)	.btn-group-lg 							//需要在有.btn-group下,下3同
			.btn-group-md
			.btn-group-sm
			.btn-group-xs

		*)	.btn-toolbar 							//将多个上诉父级容器装在一起便于管理

	4.嵌套一个分组,比如下拉菜单
		1)	.btn-group 								 //需要把原先独立的下拉菜单中的.dropdown改成一个分组.btn-group
		2) 	.dropdown-toggle 						//对button添加，使得右上角还是圆角

	5.按钮垂直排列
		1)	.btn-group-vertical

	6.按钮两端对齐
		1) 	.btn-group-justified 				//使用a标签最方便。如果使用button标签，则需要对每一个标签套一个.btn-group的容器

	7.分裂式按钮下拉菜单
		1)	只需要将菜单这两个字单独分离出来

	 -->


	<!-- 图标 -->
	<!-- 	<i class="glyphicon glyphicon-star"></i>
		<span class="glyphicon glyphicon-heart"></span>

		<button class="btn btn-info btn-lg">
			<i class="glyphicon glyphicon-star"></i>
		</button>
	 -->

	
	<!-- 下拉菜单 -->
	<!-- <div class="dropdown">
		<div data-toggle="dropdown">
			下拉菜单
			<span class="caret"></span>
		</div>
		<ul class="dropdown-menu">
			<li class="dropdown-header">标题一</li>
			<li class="divider"></li>
			<li><a href="#">首页</a></li>
			<li><a href="#">资讯</a></li>
			<li><a href="#">产品</a></li>
			<li><a href="#">关于</a></li>
		</ul>
	</div> -->

	<!-- 按钮组合 -->
	<!-- <div class="btn-toolbar">

			<div class="btn-group btn-group-lg">
				<button class="btn btn-default">左</button>
				<button class="btn btn-default">中</button>
				<button class="btn btn-default">右</button>
			</div>
			<div class="btn-group btn-group-md">
				<button class="btn btn-default">1</button>
				<button class="btn btn-default">2</button>
				<button class="btn btn-default">3</button>
			</div>
			<div class="btn-group btn-group-sm">
				<button class="btn btn-default">a</button>
				<button class="btn btn-default">b</button>
				<button class="btn btn-default">c</button>
			</div>
			<div class="btn-group btn-group-xs">
				<button class="btn btn-default">a</button>
				<button class="btn btn-default">b</button>
				<button class="btn btn-default">c</button>
			</div>

		</div>
	 -->
	
	<!-- <div class="btn-group">
			
			<div class="btn-group">	
				<button class="btn btn-default">左</button>
				<button class="btn btn-default">中</button>
				<button class="btn btn-default">右</button>
			</div>
		
			<div class="btn-group">
				<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
					下拉菜单
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu dropdown-menu-left">
					<li class="dropdown-header">标题一</li>
					<li class="divider"></li>
					<li><a href="#">首页</a></li>
					<li><a href="#">资讯</a></li>
					<li><a href="#">产品</a></li>
					<li><a href="#">关于</a></li>
				</ul>
			</div>
		</div> -->
	

	<!-- 垂直排列 -->
	<!-- <div class="btn-group  btn-group-vertical">	
		<button class="btn btn-default">左</button>
		<button class="btn btn-default">中</button>
		<button class="btn btn-default">右</button>
	</div> -->

	<!-- 两端对齐 -->
	<!-- <div class="btn-group  btn-group-justified">
		<a class="btn btn-default">左</a>
		<a class="btn btn-default">中</a>
		<a class="btn btn-default">右</a>
	</div> -->

	<!-- 两端对齐 -->	
	<!-- <div class="btn-group  btn-group-justified">
		<div class="group">
			<button class="btn btn-default">左</button>
		</div>
		<div class="group">
			<button class="btn btn-default">中</button>
		</div>
		<div class="group">
			<button class="btn btn-default">右</button>
		</div>
	</div>
 -->

<!-- 按钮式下拉菜单 -->
	<!-- <div class="btn-group">
		<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			下拉菜单
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu dropdown-menu-left">
			<li class="dropdown-header">标题一</li>
			<li class="divider"></li>
			<li><a href="#">首页</a></li>
			<li><a href="#">资讯</a></li>
			<li><a href="#">产品</a></li>
			<li><a href="#">关于</a></li>
		</ul>
	</div> -->

	<!-- 分裂式按钮式下拉菜单 -->
	<!-- <div class="btn-group">
		<button class="btn btn-default btn-group">下拉菜单</button>
		<button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu dropdown-menu-left">
			<li class="dropdown-header">标题一</li>
			<li class="divider"></li>
			<li><a href="#">首页</a></li>
			<li><a href="#">资讯</a></li>
			<li><a href="#">产品</a></li>
			<li><a href="#">关于</a></li>
		</ul>
	</div> -->

	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
</body>
</html>